<template>
    <div class="back_contain_n">
        <!-- 头部搜索 -->
        <div class="Search_Top_Part">
            <div class="search_list" >
                <div>
                    <div class="input_flex">
                        <el-input clearable v-model="query.name" placeholder="客户"></el-input>
                    </div>
                    <div class="input_flex">
                        <el-input clearable v-model="query.code" placeholder="受理号"></el-input>
                    </div>
                    <div class="input_flex daterange">
                        <el-date-picker v-model="time" type="daterange"
										range-separator="-"
										start-placeholder="开始日期"
										end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
            </div>
            <div class="search_bt">
                <span class="zll-search" @click="getList">搜索</span>
                <span class="zll-search-reset" @click="searchReset()">重置</span>
            </div>
        </div>
		<div class="Search_Top_Input">
			<div class="addNew">
				<span @click="edit({},'add')" v-if="hasRole('quality:complaint:add') "><i class="el-icon-circle-plus-outline"></i> 投诉登记</span>
			</div>
		</div>
        <!-- table -->
        <sys-table
            :tableData="tableData" 
            :tableLoading="tableLoading" 
            :tableHeader="tableHeader" :scopeWidth="120"
        >
			<template slot-scope="scope" slot="operate">
				<el-button @click="edit(scope.row,'see')" type="text" size="small">查看</el-button>
				<el-button @click="edit(scope.row,'edit')" v-if="hasRole('quality:complaint:edit')" type="text" size="small">处理</el-button>
				<el-button @click="deleteRow(scope.row)" v-if="hasRole('quality:complaint:del')" type="text" size="small">删除</el-button>
			</template>
        </sys-table>
        <div class="zll-dialog">
            <popout :title="type == 'edit'?'投诉处理':(type =='see'?'投诉处理查看':'投诉登记')" :visible.sync="addDialog" v-if="addDialog" class="bg_Size">
                <add ref="add" slot="content" :editData="editData" :type="type" @refreshData="refreshData" :acceptUserName="acceptUserName"></add>
                <template slot="bottom">
                    <p class="zll-botton Info" @click="addDialog = false">关 闭</p>
                    <p class="zll-botton" v-if="type == 'add'" @click="()=>{this.$refs.add.submitForm('addForm')}">提 交</p>
                    <p class="zll-botton stop" v-if="type == 'edit'"  @click="()=>{this.$refs.add.submitForm('addForm')}">立即受理</p>
<!--                    <p class="zll-botton instorage" v-if="type == 'reply'" style="width: 120px;">生成答复文件</p>-->
                </template>
            </popout>
        </div> 
    </div>
</template>

<script>
import Add from './add.vue';
import {formatDate} from "../../../../../plugins/formatDate";
export default {
    data(){
        return {
			tableLoading:true, //table刷新
			type: '',
			editData: {},

			query: {
				status: '0',
				name: '',
				code: '',
			},
			tableData: [
				{}
			],
			tableHeader:[],
			addDialog: false,

			acceptUserName:'',

			time:[],
        }
    },
    methods: {

        getList(){//获取表格数据

        	let self = this;

			if (self.time && self.time.length == 2){
				let startDate = new Date(self.time[0]);
				let endDate = new Date(self.time[1]);
				if (endDate.getTime() - startDate.getTime() > 365*24*3600*1000){
					self.$message.warning('时间间隔最多为1年');
					return;
				}
				self.query.startTime = formatDate(startDate,'yyyy-MM-dd');
				self.query.endTime = formatDate(endDate,'yyyy-MM-dd') + ' 23:59:59';
			}

			self.tableData = [];
			self.tableLoading = true;

			self.$http({
				url: "/jinl/complain/getComplainHandleList",
				method: "post",
				data: JSON.stringify(self.query),
				dataType: 'json',
				contentType: 'application/json',
			}).then(resp=>{
				if (resp.success) {
					self.tableHeader =  [
						{"columnValue": "complainCode", "columnName": "受理号" },
						{"columnValue": "customer", "columnName": "客户" },
						{"columnValue": "problemDescription", "columnName": "问题描述" },
						{"columnValue": "orderNum", "columnName": "订单号" },
						{"columnValue": "batchNum", "columnName": "批号"},
						{"columnValue": "complainDate", "columnName": "投诉日期"},
						{"columnValue": "acceptUserName", "columnName": "受理人"},
						{"columnValue": "acceptStatusCn", "columnName": "状态",refColor:true},
					];

					for (let data of resp.result){
						self.acceptUserName = data.acceptUserName;
						data.acceptUserName = data.acceptUserName+"  "+data.createTimeFt;
					}

					self.tableData = resp.result;
					self.tableLoading = false;

				}
			});

        },

		deleteRow(rowData) {
			let self = this;
			self.$confirm('是否确认删除？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				self.$http({
					url: '/jinl/complain/deleteComplainHandle',
					method: "post",
					data: JSON.stringify({ids: [rowData.id]}),
					dataType: 'json',
					contentType: 'application/json',
				}).then(resp => {
					if (resp.success) {
						self.getList();
						self.$message.success('删除成功！');
						return
					}
					self.$message.error(resp.message);
				});
			});
		},

		edit(val,type) {
			let self = this;
			self.addDialog = true;

			self.$nextTick(()=> {
				self.type = type;
				self.editData = Object.assign({},val);
			});
		},

		refreshData() {
			this.getList();
			this.addDialog = false;

		},

        searchReset() { //重置搜索
            this.query = {
                name: '',code: '',status: '0'
            };
            this.time = [];
            this.getList();
        },
    },

    mounted(){
        let self = this;
        self.getList();
        self.$eventBus.$on("updateWorkList",function () {
            self.addDialog = false;
            self.getList()
        })
    },

    components: {Add},
}
</script>

<style lang="scss" scoped>
@import "@/style/SearchTop.scss";
.leftList {
    display: flex;
    margin-bottom: 15px;
    li {
        list-style: none;
        width: 100px;
        height: 30px;
        line-height: 28px;
        border-bottom: 1px solid #fff;
        color: #333;
        text-align: center;
        cursor: pointer;
        margin-bottom: 10px;
        transition: all .5s;
        position: relative;
        display: flex;
        justify-content: center;
        &.active {
            color: #ff9935;
            border-color: #ff9935;
            position: relative;
            font-weight: 600;
            font-size: 14px;
        }
    }
}
</style>